<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="10" :offset="2">
        <div style="display: flex">
          <div style="display: flex; flex-direction: column; font-size: 12px; text-align: right">
            <span>备注描述:</span>
            <span style="width: 100px">Note to Describe:</span>
          </div>
          <el-input v-model="memo" size="medium"
            style="margin: 0 20px 10px 10px" @keyup.enter.native="searchChange"
            prefix-icon="el-icon-search"
          ></el-input>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
          <el-tooltip content="Search" placement="top">
              <el-button type="success" icon="el-icon-search" size="medium" @click='searchChange'></el-button>
          </el-tooltip>
      </el-col>
    </el-row>
    <div>
      <el-table
        v-loading="loading"
        element-loading-text="正在加载..."
        :data="tableData" border
        style="width: 100%;text-align: center">
        <el-table-column
          prop=""
          label="序号,"
          width="100"
          :render-header="renderHeader">
          <template slot-scope="scope">
            <div>
              <span>{{scope.$index + 1}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="memo"
          label="备注描述,Note to Describe"
          :render-header="renderHeader" center>
          <template slot-scope="scope">
            <el-popover
              placement="top"
              trigger="hover">
              <ul style="text-align: righ; list-style: none; max-height: 200px; overflow-y: scroll; padding: 0 10px">
                <li v-for="(item, index) of infoList" :key="index" style="text-align: left; line-height: 200%">
                  {{`${item.itemDescription} ${item.quantity}`}}
                </li>
              </ul>
              <a slot="reference" @mouseenter="getInfoList(scope.row.id)" style="color: #409EFF; cursor: pointer">{{scope.row.memo}}</a>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作,Operation"
          width="300"
          :render-header="renderHeader">
          <template slot-scope="scope">
            <div style="text-align: center">
                <el-tooltip content="To View" placement="top">
                    <el-button type="text" size="small" class="el-icon-view"
                               style="font-size: 24px" @click="showModal(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip content="Add To The Application Form" placement="top">
                    <el-button type="text" size="small"
                               class="el-icon-materials-gouwuchetianjia" @click="joinCart(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip content="Delete" placement="top">
                    <el-button type="text" size="small" class="el-icon-delete"
                               style="font-size: 24px" @click="showConfirm(scope.row.id)"></el-button>
                </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <v-pagination :page-data="pageData" @onPageChange="onPageChange" v-if="!isEmpty"></v-pagination>
      <el-dialog
        title="是否删除该物料单？"
        :visible.sync="popConfirm"
        width="20%"
        center :show-close="false" :close-on-click-modal="false">
        <div style="text-align: center">
          <el-button @click="hideConfirm">取 消</el-button>
          <el-button type="primary" @click="onRemove">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="modalVisible"
        width="80%" :show-close="false" :close-on-click-modal="false">
        <div slot="title" style="position: absolute; top: 0; left: 0; width: 100%; height: 40px;
         line-height: 40px; text-align: center; font-size: 18px; background: #15a732; color: #fff;">物资详情</div>
        <div>
          <el-table
            :data="infoList" border
            style="width: 100%;text-align: center">
            <el-table-column
              prop="itemNum"
              label="物资编码,Item Code"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            <el-table-column
              prop="itemDescription"
              label="物资描述,Item Description"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量,Quantity"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            <el-table-column
              prop="quantityBasedOnMoq"
              label="最小订货量,MOQ"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            </el-table-column>
            <el-table-column
              prop="costCenter"
              label="成本中心,Cost Center"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            <el-table-column
              prop="prNumber"
              label="待采购物资ERP单号,ERP Application Quantity"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
            <el-table-column
              prop="moveOrderNumber"
              label="库存物资ERP单号,ERP Claims Quantity"
              width="200"
              :render-header="renderHeader">
            </el-table-column>
          </el-table>
          <v-pagination :page-data="infoPageData" @onPageChange="onModalPageChange" v-if="!isInfoEmpty"></v-pagination>
        </div>
        <span slot="footer" style="position: absolute; bottom: 20px; left: 0;
          width: 100%; height: 40px; line-height: 40px; text-align: right; border-top: 1px solid #ccc">
          <el-button @click="onCancelModal" style="position: relative; top: 8px; right: 16px;">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getBilMaterials, getHoverInfo, updateBillMaterials, oftenBill } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";
import bus from "../../common/bus";
import {UserHelper} from "../../helpers/UserHelper";
import { ObjectUtil } from "../../../components/axios/objectUtils";
import vPagination from '../../common/Pagination.vue';
import renderHeader from '../../common/renderHeader.js';
const Cookie = require('js-cookie');

  export default {
    name: "material-bill",
    components:{
      vPagination
    },
    props: ['applyId'],
    data: function() {
      return {
        memo: null,
        page: 1,
        isEmpty: true,
        oftenUse: 2,
        tableData: [],
        pageData: {},
        infoList: [],
        infoPageData: {},
        isInfoEmpty: true,
        applysId: null,
        popConfirm: false,
        confirmId: null,
        modalVisible: false,
        loading: false
      }
    },
    mounted() {
      bus.$on("tabType", (name)=>{
        if(name === 'billMaterials') {
          this.resetAll();
          this.getMaterialList({page: this.page, oftenUse: this.oftenUse});
        }
      });
    },
    methods: {
      renderHeader,
      searchChange: function() { //搜索事件
        const param = {
          page: this.page,
          memo: this.memo,
          oftenUse: this.oftenUse
        }
        this.getMaterialList(param);
      },
      getMaterialList: function(param) { //获取列表信息
        this.loading = true;
        http.post(getBilMaterials, param).then(res => {
          if(res.data && res.data.resultMess === "success") {
            this.tableData = res.data.data.list;
            this.pageData = res.data.data.page;
            this.isEmpty = res.data.data.list.length === 0;
          } else {
            this.$notify.error({
              title: '提示',
              message: res.data.resultMess,
            });
          }
          this.loading = false;
        }).catch((error) => {
          this.loading = false;
          this.$notify.error({
            title: '提示',
            message: '网络错误',
          });
        })
      },
      onPageChange: function(page) { //翻页
        this.page = page;
        const param = {
          page: page,
          memo: this.memo,
          oftenUse: this.oftenUse
        }
        this.getMaterialList(param);
      },
      getInfoList: async function(applyId, page = 1) { //获取info信息
        const memo = await http.post(getHoverInfo, { applyId, page });
        if(memo.data && memo.data.resultMess === 'success') {
          this.infoList = memo.data.data && memo.data.data.list || [];
          this.infoPageData = memo.data.data && memo.data.data.page || {};
          this.isInfoEmpty = memo.data.data && memo.data.data.list && memo.data.data.list.length === 0;
        }
      },
      joinCart: function(oftenApplyId) {
        http.post(oftenBill, {oftenApplyId, applyId: this.applyId}).then(res => {
          let type, content;
          if(res.data && res.data.resultMess === "success") {
            type = 'success';
            content = {title: '提示', message: "加入申请单成功"}
            this.getMaterialTotal();
          } else {
            type = 'error';
            content = {title: '提示', message: res.data.resultMess}
          }
          this.$notify[type](content);
        }).catch((error) => {
          this.loading = false;
          this.$notify.error({
            title: '提示',
            message: '网络错误',
          });
        })
      },
      showConfirm: function(id) {
        this.popConfirm = true;
        this.confirmId = id;
      },
      hideConfirm: function() {
        this.popConfirm = false;
        this.confirmId = null;
      },
      onRemove: function() { //删除
        this.popConfirm = false;
        http.post(updateBillMaterials, {id: this.confirmId, oftenUse: 1}).then(res => {
          let type, content;
          if(res.data && res.data.resultMess === "success") {
            type = 'success';
            content = {title: '提示', message: "删除成功"}
          } else {
            type = 'error';
            content = {title: '提示', message: res.data.resultMess}
          }
          this.$notify[type](content);
          this.getMaterialList({page: this.page, oftenUse: 2});
        }).catch((error) => {
          this.loading = false;
          this.$notify.error({
            title: '提示',
            message: '网络错误',
          });
        })
      },
      showModal: function(applyId) {
        this.modalVisible = true;
        this.applysId = applyId;
        this.getInfoList(applyId);
      },
      onCancelModal: function() {
        this.modalVisible = false;
        this.isInfoEmpty = true;
        this.infoList = [];
        this.infoPageData = {};
        this.applysId = null;
      },
      onModalPageChange: function(page) { //详情翻页
        this.getInfoList(this.applysId, page);
      },
      getMaterialTotal: async function() { //获取加入申请单数量
        this.$emit('getMaterialTotal', null)
      },
      resetAll: function() {
        this.memo = null;
        this.page = 1;
        this.isEmpty = true;
        this.oftenUse = 2;
        this.tableData = [];
        this.pageData = {};
        this.loading = false;
        this.infoList = [];
        this.popConfirm = false;
        this.confirmId = null;
        this.modalVisible = false;
        this.infoPageData = {};
        this.isInfoEmpty = true;
        this.applysId = null;
      }
    }
  }
</script>

<style scoped>
</style>
